div {
    box-sizing: border-box
}

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #f2f4f8;
}

.row1 {
    display: flex;
    justify-content: space-between;
}

.nav_box {
    position: relative;
    width: 380px;
    height: 90px;
    background-color: #fb6d49;
    margin: 0 10px;
    border-radius: 10px;
    padding-top: 25px;
}

.nav_box:nth-child(2) {
    background-color: #67c23a;
}

.nav_box:nth-child(3) {
    background-color: #e6a23c;
}

.nav_box:nth-child(4) {
    background-color: #3a7ce7;
}

.nav_box .layui-icon {
    position: absolute;
    top: 25px;
    left: 80px;
    font-size: 45px;
}

.nav_box p {
    /* margin: 10px 10px 0 10px; */
    margin-left: 150px;
    font-size: 20px;
}

.row2 {
    display: flex;
    justify-content: space-between;
}

.main_box {
    width: 529px;
    height: 322px;
    background-color: #fff;
    margin-top: 20px;
    border-radius: 10px;
    padding: 0;
    overflow: hidden;
}

.main_box .main-echarts {
    width: 100%;
    height: 278px;
}

.main_box .main-echarts2 {
    width: 100%;
    height: 278px;
}

.row3 {
    padding: 0 45px 0 12px;
}

.biao_box {
    width: 100%;
    height: 326px;
    background-color: #fff;
    margin: 20px 10px 0 11px;
}

.main_box .header {
    width: 100%;
    height: 44px;
    background-color: #dddddd;
    line-height: 44px;
    padding: 0 10px;
    font-size: 16px;
}

.main_box .list {
    width: 100%;
    height: 40px;
    border-bottom: 1px solid #eee;
    line-height: 40px;
    font-size: 14px;
}

.main_box .list .layui-icon {
    margin: 0 20px;
}

.main_box .list span {
    margin-right: 100px;
}

.main_box .list span:nth-child(5) {
    margin: 0;
}